{include file="public/toper" /}
<div class="x-body">
    <div class="layui-row">
        <div class="layui-form layui-col-md12 x-so">
            <input type="text" name="sreach" value=""  style="width:250px;" id="key"   placeholder="请输入昵称/手机号" autocomplete="off" class="layui-input">
            <input type="text" name="sreach" value=""  style="width:300px;" id="sj"   placeholder="注册时间" readonly="readonly" autocomplete="off" class="layui-input">
            <button class="layui-btn" id="search"><i class="layui-icon">&#xe615;</i></button>
        </div>
    </div>
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">选择</button>
    </div>
</script>
<script type="text/html" id="image">
    <img src="{{d.img}}" class="thumb" thumb="{{ d.img }}"/>
</script>
<script>
    layui.use(['table','util','laydate'], function(){
        var table = layui.table, $ = layui.jquery;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var loading = layer.load(1, {shade: [0.1,'#fff'] });
        var tableIn = table.render({
            method: 'post',
            elem: '#test'
            ,url: "{:url('User/choice')}"
            ,id:'test'
            ,cols: [[
                {type:'checkbox'}
                ,{field:'user_id', width:80, title: '序号',align: 'center',type:'numbers'}
                ,{field:'user_id', width:100, title: 'ID',align: 'center'}
                ,{width:100, title: '头像',align: 'center',toolbar:'#image'}
                ,{field:'name', width:150, title: '昵称',align: 'center'}
                ,{field:'phone', width:150, title: '手机号',align: 'center'}
                ,{width:180, title: '注册时间',align: 'center',templet: '<div>{{layui.util.toDateString(d.time*1000)}}</div>'}
            ]]
            ,page: true
            ,limit: 30
            ,limits:[30,60,90,120,150,180,210,240,270,300]
            ,toolbar: '#toolbarDemo'
            ,defaultToolbar:[]
        });
        layer.close(loading);

        laydate.render({
            elem: '#sj'
            ,type: 'datetime'
            ,range: true
        });

        //搜索
        $('#search').on('click', function () {
            tableIn.reload({
                where: {key: $('#key').val(),sj:$('#sj').val()}
                ,page: {curr: 1 }
            });
        });

        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;

                    var name = '';
                    var user_id = '';
                    if(data.length<1){
                        layer.msg("请选择用户");
                        return false;
                    }
                    for(var i=0;i<data.length;i++){
                        name += data[i].name+ ",";
                        user_id += data[i].user_id+ ",";
                    }
                    if (name.length > 0) {
                        name = name.substr(0, name.length - 1);
                    }
                    if (user_id.length > 0) {
                        user_id = user_id.substr(0, user_id.length - 1);
                    }
                    parent.$('#name').val(name);
                    parent.$('#userid').val(user_id);
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                    break;

            };
        });
    });
</script>
{include file="public/footer"/}